<script setup lang='ts' name="policy-message-detail">
import { getPolicyDetail } from '@fl/api/fangjiaohui'
import UpdatedOss from '@fl/components/upLoad-oss.vue'
import { ElDialog, ElForm, ElFormItem } from 'element-plus'
import { nextTick, toRefs } from 'vue'

const props = withDefaults(defineProps<{
    data?: any
    modelValue: boolean
    videoType: any
}>(), {
    data: () => {},
})

const emits = defineEmits(['update:modelValue', 'confirm'])
const { data, modelValue } = toRefs(props)

const state = { catId: '', img: '', info: '', title: '', url: '' }
const form = ref<any>({ ...state })

const formRef = ref()

function close() {
    emits('update:modelValue', false)
}

async function init(val: any) {
    await nextTick()
    getPolicyDetail(val.id).then((res: any) => {
        form.value = res.data
    })
}

watch(data, (val: any) => {
    if (val)
        init(val)
}, {
    deep: true,
    immediate: true,
})
</script>

<template>
    <ElDialog v-model="modelValue"
              width="800"
              title="详情"
              @close="close"
    >
        <ElForm ref="formRef"
                :model="form"
                label-width="auto"
        >
            <ElFormItem label="专题名称:">
                {{ form.name }}
            </ElFormItem>

            <ElFormItem label="专题分类:">
                {{ form.catName }}
            </ElFormItem>

            <ElFormItem label="辖区:">
                {{ form.region }}
            </ElFormItem>

            <ElRow>
                <ElCol :span="12">
                    <ElFormItem label="封面图:">
                        <UpdatedOss v-model="form.img"
                                    :disabled="true"
                        />
                    </ElFormItem>
                </ElCol>
            </ElRow>

            <ElFormItem label="专题内容:">
                <p class="info-sty"
                   v-html="form.info"
                />
            </ElFormItem>
        </ElForm>
    </ElDialog>
</template>

<style lang="less" scoped>
.info-sty {
    height: 250px;
    overflow-y: auto;
}
</style>
